<style type="text/css">
.voucherGrid .head { height: 48px; }
.voucherGrid .ybar { margin-top: 48px; }
.voucherGrid .th { height: 48px; font-size: 18px; }
.voucherGrid .th .sizer { height: 48px; }
.voucherGrid .th[group] { height: 24px; border-left: 0px; }
<!-- -->
.voucherGrid .foot .td { background-color: #CCCCCC; height: 32px; }
.voucherGrid .foot .sum { text-align: right; font-style: bold; }
.voucherGrid table {
	border-collapse: collapse; table-layout: fixed; border: 1px;
}
.voucherGrid .td[name=debit],th[name=debit] { padding: 0px; }
.voucherGrid .td[name=credit],th[name=credit] { padding: 0px; }
.voucherGrid .bi {
	font-size: 12px; height: 20px; overflow: hidden; padding: 0px;
	border-left: 1px solid #999999; padding: 0px;
}
.voucherGrid .td .bi:first-child { border-left-width: 0px; }
.voucherGrid .th .bi {
	height: 24px; border-top: 1px solid #CCCCCC;
}
.voucherGrid .bi10 { border-left-color: red; }
</style>
<script type="text/javascript">
$(function(){
	function balanceRender(r, f){
		var bis = ['十','亿','千','百','十','万','千','百','十','元','角','分'];
		var tr = $('<tr></tr>');
		var v = (r && f)? Math.ceil(r[f]*100) + '' : 0;
		$.each(bis, function(n,c){
			var a = $('<td></td>').addClass('bi').appendTo(tr);
			if(r && f){
				if(v.length>11-n && v!='0'){
					c = v[v.length-(12-n)];
					a.css('font-weight', 'bold');
				}else{
					c = '&nbsp;';
				}
			}
			a.append(c).addClass('bi'+n);
		});
		return $('<table style="width: 144px;"></table>').append(tr);
	}
	var hd1 = balanceRender().prepend('<tr><td colspan="12">借方金额</td></tr>');
	var hd2 = balanceRender().prepend('<tr><td colspan="12">贷方金额</td></tr>');
	var vw = $('.view');
	vw.mac('grid', {
		sortLocally: true,
		headerHeight: 48,
		footerHeight: 24,
		cols : [{
			field: 'subject', title : '会计科目', width: 165
		},{
			field: 'debit', title : '借方金额', header: hd1, width: 144, sizeable: false,
			render: function(r){
				return balanceRender(r, 'debit');
			}
		},{
			field: 'credit', title : '贷方金额', header: hd2, width: 144, sizeable: false,
			render: function(r){ return balanceRender(r, 'credit'); }
		}],
		loader: {
			url: '/mac/js/grid/data.php',
			params: { pageNo: 1, pageSize: 50 },
			autoLoad: true
		},
		pagerLength: 10,
		afterLoad: function(ro){
			var dt=ct=0;
			$.each(ro, function(n,c){
				dt+=c.debit;
				ct+=c.credit;
			});
			var ft = vw.newRow({
				summary: '', subject: '<div class="sum">合计：</a>',
				debit: dt,
				credit: ct
			}).addClass('foot');
			var mm = vw.children('.main');
			mm.children('.foot').remove();
			mm.append(ft);
		}
	});
});
</script>
<div class="viewPort demoPanel">
	<div class="view grid voucherGrid"></div>
</div>